<template>
  <div class="all-box">
    <van-empty v-show="msg" description="您还没有待评论的订单" />
    <likelike v-show="msg" />
    <div class="box" v-for="(items, index) in indent" :key="items.id">
      <div class="top">
        <div class="left">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaomixinLogo"></use>
          </svg>
          <span>{{ items.source }}</span>
        </div>
        <div class="right">{{ items.state }}</div>
      </div>
      <router-link to="/order">
        <div
          class="goods"
          v-for="itemsarr in indent[index].arr"
          :key="itemsarr.id"
          @click="showPopup111(index, items.id, items.port)"
        >
          <div class="left">
            <img :src="itemsarr.img" alt="" />
            <div>
              <p>{{ itemsarr.name }}</p>
              <span>{{ itemsarr.color }}</span>
            </div>
          </div>
          <div class="right">
            <p>{{ itemsarr.price }}</p>
            <div>
              <span>x</span><span>{{ itemsarr.number }}</span>
            </div>
          </div>
        </div>
      </router-link>
      <div class="money">
        <div class="price">
          <div class="left">{{ items.date }}</div>
          <div class="right">
            共<span>{{ items.arr.length }}</span
            >件商品 实付金额:
            <span class="total">￥{{ items.prices }}</span>
          </div>
        </div>
        <div class="delete">评价</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import store from "../../store/index";
import likelike from "./likelike";
export default {
  name: "evaluate",
  components: {
    likelike,
  },
  data() {
    return {
      indent: [],
      msg: true,
      id: "",
      index: "",
      port: ""
    };
  },

  methods: {
    showPopup111(date, id, port) {
      this.id = id;
      this.index = date;
      this.port = port;
      store.commit("mChangeOrderDetails", this.id);
      store.commit("mChangePort", this.port);
    },
  },
  created() {
    axios({
      url: "http://localhost:3000/indent?tel=" + localStorage.getItem("tel"),
      method: "get",
      params: {
        type: this.type,
      },
    }).then((res) => {
      this.indent = res.data;
      if (res.data.length > 0) {
        this.msg = false;
      }else{
        this.msg = true;
      }
    });
  },
};
</script>

<style scoped>
.icon {
  width: 0.18rem;
  height: 0.18rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.box {
  margin-top: 0.06rem;
  background: #f5f5f5;
}
.top {
  height: 0.35rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top .left {
  font-size: 0.14rem;
  margin-left: 0.12rem;
  display: flex;
}
.top .left span {
  margin-left: 0.05rem;
}
.top .right {
  font-size: 0.14rem;
  color: #fa6016;
  margin-right: 0.16rem;
}
.goods {
  height: 0.76rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.goods .left {
  display: flex;
}
.goods .left div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.goods .left div p {
  font-size: 0.13rem;
}
.goods .left div span {
  font-size: 0.11rem;
  color: #8a8a8a;
}
.goods .right {
  height: 0.5rem;
  margin-right: 0.15rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 0.14rem;
  color: #8c8c8c;
}
.goods img {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.2rem;
  margin-right: 0.1rem;
}
.money {
  height: 0.84rem;
  padding: 0 0.15rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
}
.money .price {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.money .price .left {
  font-size: 0.11rem;
  color: #8c8c8c;
}
.money .price .right {
  font-size: 0.13rem;
}
.money .price .right .total {
  font-size: 0.16rem;
  color: #8c8c8c;
}
.money .delete {
  width: 0.75rem;
  height: 0.29rem;
  line-height: 0.29rem;
  text-align: center;
  border: 1px solid #f77845;
  border-radius: 0.03rem;
  font-size: 0.11rem;
  color: #f77845;
}
</style>